<template>

     <el-form ref="ruleForm" :rules="currentRules" :model="form.data" label-width="120px">
          <fieldset>
               <legend>新增表单</legend>
               <form-item v-for="(column,prop) in form.columns" :key="prop" :visible="column.visible" :prop="prop"
                    :column="column" v-model="form.data[prop]" :formspan="20">
               </form-item>
          </fieldset>

          <el-form-item class=el-form-submit>
               <el-button type="primary" @click="submitForm()">创建</el-button>
               <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
     </el-form>
</template>

<script>
    import formitem from '@/components/form/item'
    export default {
        components: {
            'form-item': formitem,
        },
        data() {
            return {
                currentRules: {},
                form: {
                    columns: {
                        name: {
                            componentName: 'form-input',
                            label: "学生姓名",
                            rules: 'required',
                            visible: true
                        },
                        phone: {
                            componentName: 'form-input',
                            label: "联系电话",
                            rules: 'required'
                        },
                        major: {
                            componentName: 'form-select',
                            label: "学生专业",
                            rules: 'required',
                            options: [{
                                label: '会计学',
                                value: "1"
                            }, {
                                label: '土木工程',
                                value: "2"
                            }]
                        },
                        address: {
                            componentName: 'form-input',
                            label: "地址"
                        },
                        sex: {
                            componentName: 'form-radio',
                            label: "性别",
                            options: [{
                                label: '男',
                                value: "man"
                            }, {
                                label: '女',
                                value: "woman"
                            }]
                        },
                        desc: {
                            componentName: 'form-input',
                            type: 'textarea',
                            label: "描述"
                        },

                    },
                    data: {
                        name: "汤伟"
                    }
                },
            }

        },
        created() {
            this.currentRules = this.$core.formRules(this.form);
        },
        methods: {
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        alert('submit!');
                        this.form.columns.name.visible = false;
                    } else {
                        console.log('error submit!!');
                        this.form.data.name = "未验证成功";
                        return false;
                    }
                });
            },
            resetForm() {
                this.$refs.ruleForm.resetFields();
            },
        },
        watch: {}
    }
</script>